<template>
	<view class="container">
		<TopNav :title="title" :bg-color="topBGC"></TopNav>
		<!-- 	<view class="check-banner progress" v-if="detailData && detailData.check_status == 0">
			<image src="/static/images/index/check.png" mode=""></image>
			<text>请耐心等待平台审核，平台审核通过后服务项目将生效。</text>
		</view>
		<view class="check-banner pass" v-else-if="detailData && detailData.check_status == 1">
			<image src="/static/images/index/pass.png" mode=""></image>
			<text>资料审核通过。</text>
		</view>
		<view class="check-banner reject" v-else-if="detailData && detailData.check_status == 2">
			<image src="/static/images/index/reject.png" mode=""></image>
			<text>资料审核不通过，请重新提交申请。</text>
		</view> -->
		<view class="main">
			<!-- 等待审核数据加载完成再判断审核提示 -->
			<view class="" v-if="isCheckLoading">
				<!-- 判断是否只需要平台审核 -->
				<view class="" v-if="isCheck && !isOfflineCheck">
					<view class="hint m-b10" v-if="!detailData">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>该项目申请后需要审核方可开通，请确保符合申请该项目的标准，点击了解</text>
						<text class="text-theme m-t4"
							@click="handleToPage('/pages/common/document/index?title=如何加入专搭服务项目')">《如何加入专搭服务项目》</text>
					</view>
					<!-- 不需要线下认证 需要审核 -->
					<view class="hint m-b10" v-else-if="detailData && detailData.check_status == 0">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>请耐心等待平台审核，平台审核通过后服务项目将生效。</text>
					</view>
					<view class="hint m-b10" v-else-if="detailData && detailData.check_status == 2">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>审核不通过，请修改申请内容后重新提交。</text>
					</view>
				</view>

				<!-- 判断是否只需要线下认证 -->
				<view class="" v-if="!isCheck && isOfflineCheck">
					<!-- 未申请过服务且未通过线下认证 -->
					<view class="hint m-b10" v-if="!detailData && !isOfflineAuth">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>该项目需要完成线下认证才可开启，点击</text>
						<text class="text-theme m-t4"
							@click="handleToPage('/pages/common/document/index?title=如何进行线下认证')">《如何进行线下认证》</text>
					</view>
					<view class="hint m-b10" v-else-if="!detailData && isOfflineAuth">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>你已通过线下认证，可以正常开启该项服务。</text>
					</view>

				</view>

				<!-- 判断是否需要线下认证并审核 -->
				<view class="" v-if="isCheck && isOfflineCheck">
					<!-- 未申请过服务且未通过线下认证 -->
					<view class="hint m-b10" v-if="!detailData && !isOfflineAuth">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>加入专搭类服务项目需要通过线下认证及平台审核，点击</text>
						<text class="text-theme m-t4"
							@click="handleToPage('/pages/common/document/index?title=如何进行线下认证')">《如何进行线下认证》</text>
						<text class="text-theme m-t4"
							@click="handleToPage('/pages/common/document/index?title=如何加入专搭服务项目')">《如何加入专搭服务项目》</text>
					</view>
					<!-- 未申请过服务但已通过线下认证 -->
					<view class="hint m-b10" v-else-if="!detailData && isOfflineAuth">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>已通过线下认证，该项目申请后需要审核方可开通，请确保符合申请该项目的标准，点击了解</text>
						<text class="text-theme m-t4"
							@click="handleToPage('/pages/common/document/index?title=如何加入专搭服务项目')">《如何加入专搭服务项目》</text>
					</view>
					<view class="hint m-b10" v-if="detailData && detailData.check_status == 0">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>请耐心等待平台审核，平台审核通过后服务项目将生效。</text>
					</view>
					<view class="hint m-b10" v-else-if="detailData && detailData.check_status == 2">
						<u-icon name="info-circle" size="14" color="#FE3F59" class="explain" bold></u-icon>
						<text>审核不通过，请修改申请内容后重新提交。</text>
					</view>
				</view>
			</view>
			<view class="radius-6 bg-white p-lr12">
				<view class="flex justify-between align-center p-tb12">
					<view class="flex align-center">
						<image src="/static/images/mine/menu/service/menu-1.png" class="width-20 height-20" mode="">
						</image>
						<text class="f-s15 f-w400 text-dark line-height20 m-l8">{{title}}</text>
					</view>
					<view class="flex align-center">
						<u-switch v-model="form.is_open" size="20" :inactiveValue="0" :activeValue="1"
							activeColor="#FE3F59" :disabled="detailData && detailData.check_status == 0"
							@change="handleSwitchChange" inactiveColor="#B2B8C1"></u-switch>
					</view>
				</view>
			</view>
			<view class="radius-6 bg-white p-lr12 m-t10">
				<view class="flex justify-between align-center p-tb12">
					<text class="f-s15 f-w500 text-dark line-height20">项目价格设置</text>
					<view class="flex align-center" @click="handleOpenPicker">
						<text class="line-height20 f-w600 f-s14 m-r4">￥{{form.service_price || '-'}}/小时</text>
						<image src="/static/images/mine/dada-more.png" class="width-20 height-20" mode=""></image>
					</view>
				</view>
			</view>
			<view class="radius-6 bg-white p-lr16 p-tb14 m-t10">
				<view class="">
					<text class="f-s15 f-w500 text-dark line-height20">可以提供哪些服务场景？(多选)</text>
				</view>
				<view class="tag m-t10">
					<view class="tag-item" v-for="(item,index) in tagList" :key="index" @click="handleSelect(item)"
						:class="{'tag-item-active':checkSelection(item.text)}">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="radius-6 bg-white p-lr16 p-tb14 m-t10">
				<view class="">
					<text class="f-s15 f-w500 text-dark line-height20">申请材料</text>
					<text class="f-s12 f-w400 text-gray line-height20 m-l6">(可选) 最多上传6张图</text>
				</view>
				<view class="m-t10">
					<UploadImage width="210rpx" height="210rpx" :limit="6" v-model="form.apply_images">
						<view class="upload-image">
							<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
							<text class="m-t8 text-gray f-s12">上传图片</text>
						</view>
					</UploadImage>
				</view>
			</view>
			<view class="m-t15 flex flex-direction line-height22 text-gray f-s14 f-w400">
				<u-parse :content="info.rule_desc || '-'"></u-parse>
			</view>
			<view class="fixed-bottom bg-white p-lr16">
				<view class="flex align-items-baseline tips">
					<u-radio-group v-model="checked">
						<u-radio activeColor="#FE3F59" shape="square" size="32rpx" :name="true"></u-radio>
					</u-radio-group>
					<view class="f-s12">
						我已阅读并同意<text class="text-theme"
							@click="handleToPage('/pages/common/document/index?title=商家管理规则')">《搭搭陪伴平台商家管理规则》</text>
					</view>
				</view>
				<view class="self-btn full-width m-t6" hover-class="pressed" @click="handleSubmit">
					<text>确认</text>
				</view>
			</view>
		</view>
		<Popup :show.sync="popupShow" title="请设置项目价格">
			<view class="p-tb16">
				<van-picker :columns="columns" :default-index="checkPickerIndex" class="m-b12" ref="picker" />
				<view class="self-btn full-width disabled" hover-class="pressed" @click="handlePickerConfirm">
					<text>确认</text>
				</view>
			</view>
		</Popup>
		<Toast></Toast>
	</view>
</template>

<script>
	import Popup from "@/components/popup/index.vue";
	import UploadImage from "@/components/upload-image/index.vue"
	import {
		serviceDetail,
		priceList,
		sceneList,
		serviceApply
	} from "@/api/mine/service";
	import {
		authStepsDetails
	} from "@/api/mine/auth.js"
	export default {
		components: {
			Popup,
			UploadImage
		},
		data() {
			return {
				isCheckLoading: false,
				isCheck: false, // 是否需要审核
				isOfflineCheck: false, // 是否需要线下认证
				isOfflineAuth: false, // 是否通过线下认证
				info: {}, // 项目相关信息
				title: '服务项目',
				topBGC: 'rgba(255,255,255,0)',
				checked: false,
				detailData: null,
				form: {
					service_id: '',
					website_id: '',
					service_price: '',
					is_open: 0,
					service_scene: '',
					apply_images: ''
				},
				queryParams: {
					service_id: '',
					website_id: ''
				},
				columns: [],
				defaultIndex: 0,
				popupShow: false,
				selection: [],
				tagList: []
			}
		},
		computed: {
			translatePicker() {
				return this.columns.indexOf(this.price)
			}
		},
		onPageScroll(event) {
			let scrollTop = event.scrollTop
			// 计算透明度（0-1之间变化）
			// 这里设定当滚动超过100px时完全变为白色，你可以调整这个值
			let navbarOpacity = Math.min(scrollTop / 40, 1)
			this.topBGC = `rgba(255, 255, 255, ${navbarOpacity})`
		},
		async onLoad(query) {
			this.title = query.title
			this.queryParams.website_id = query.city_id
			this.queryParams.service_id = query.id
			this.form.website_id = query.city_id
			this.form.service_id = query.id
			await this.getDetail()
			this.getData()
			// 如果有审核内容，则代表当前服务已经提交过审核，无需判断是否需要线下认证和审核
			// if (this.detailData) return
			this.info = JSON.parse(query.content)
			if (this.info.need_check == 1) this.isCheck = true
			// 判断是否需要线下认证
			if (this.info.must_offline) {
				this.isOfflineCheck = true
				// 需要线下认证则判断是否已经认证通过
				let offlineAuth = await this.getOfflineAuth()
				if (offlineAuth && offlineAuth.status == 1) {
					this.isOfflineAuth = true
				} else {
					this.isOfflineAuth = false
				}
			}
			this.isCheckLoading = true
			console.log('需要审核，需要线下审核，线下审核状态 ', this.isCheck, this.isOfflineCheck, this.isOfflineAuth);
		},
		computed: {
			checkPickerIndex() {
				if (!this.columns.length) return 0
				let index = this.columns.indexOf(this.getIntegerPart(this.form.service_price))
				return index === -1 ? 0 : index
			}
		},
		methods: {
			// 开启状态改变
			handleSwitchChange(val) {
				// 需要线下认证且线下认证未通过
				if ((this.isOfflineCheck && !this.isOfflineAuth) && val) {
					this.$toast('该项目需要完成线下认证才可开启')
					this.form.is_open = false
				}
			},
			// 获取线下认证状态
			async getOfflineAuth() {
				return await authStepsDetails({
					auth_type: 8
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					return auth_detail
				}).catch(() => {
					return ''
				})
			},
			handleToPage(path) {
				this.$tab.navigateTo(path)
			},
			getIntegerPart(input) {
				// 正则表达式匹配数值或可转换为数值的字符串
				const numberRegex = /^[-+]?(\d+(\.\d*)?|\.\d+)([eE][-+]?\d+)?$/;

				// 如果是数字类型直接处理
				if (typeof input === 'number') {
					return Math.trunc(input);
				}

				// 如果是字符串且匹配数值格式
				if (typeof input === 'string' && numberRegex.test(input.trim())) {
					// 转换为数字后取整
					const num = parseFloat(input);
					return Math.trunc(num);
				}

				// 如果不是数值或可转换的字符串，返回null或其他默认值
				return null;
			},
			handleSubmit() {
				if (this.form.is_open) {
					if (this.isOfflineCheck && !this.isOfflineAuth) {
						this.$toast('该项目需要通过线下认证才可开启')
						return
					}
					if (!this.form.service_price) {
						this.$toast('请设置项目价格')
						return
					}
					if (this.selection.length === 0) {
						this.$toast('请选择服务场景')
						return
					}
					if (!this.checked) {
						this.$toast('请阅读并同意搭搭陪伴平台商家管理规则')
						return
					}
				}

				this.form.is_open = this.form.is_open ? 1 : 0
				this.form.service_scene = this.selection.join(',')
				this.$modal.loading("正在申请").then(() => {
					serviceApply(this.form).then(res => {
						this.$modal.closeLoading()
						this.$toast(res.msg)
						this.getDetail()
					}).catch(() => this.$modal.closeLoading())
				})
			},
			handlePickerConfirm() {
				this.form.service_price = this.$refs['picker'].getValues()[0]
				this.defaultIndex = this.$refs['picker'].getIndexes()[0]
				this.popupShow = false
			},
			getData() {
				// this.getDetail()
				this.getPriceList()
				this.getSceneList()
			},
			getSceneList() {
				sceneList(this.queryParams).then(res => {
					let {
						data: {
							list = []
						}
					} = res
					this.tagList = list.map(item => {
						return {
							value: item.id,
							text: item.title
						}
					})
				})
			},
			getPriceList() {
				priceList(this.queryParams).then(res => {
					let {
						data
					} = res
					this.columns = data?.price_values_arr || []
				})
			},
			async getDetail() {
				await serviceDetail(this.queryParams).then(res => {
					let {
						data
					} = res
					if (data) {
						for (let key in this.form) {
							this.form[key] = data[key]
						}
						this.detailData = data
						this.selection = data.service_scene.split(',')
					}

				})
			},
			handleOpenPicker() {
				this.popupShow = true
			},
			handlePickerChange(picker, value) {
				this.price = value
			},
			handleSelect(obj) {
				let index = this.selection.indexOf(obj.text)
				if (index === -1) {
					this.selection.push(obj.text)
				} else {
					this.selection.splice(index, 1)
				}
			},
			checkSelection(val) {
				// console.log('index: ',this.selection.indexOf(val));
				return this.selection.indexOf(val) !== -1
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		@include fixed-bottom(60rpx);
	}
</style>
<style scoped lang="scss">
	.main {
		padding: 20rpx 24rpx;
		overflow: hidden;

		.hint {
			background: #FFE8F0;
			border-radius: 12rpx;
			border: 1rpx solid #FF6494;
			padding: 16rpx;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 36rpx;
		}

		.tips {
			background: #FEEBEE;
			padding: 20rpx 24rpx;
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 100%;
		}

		.tag {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: -10rpx;

			// grid-template-columns: repeat(12,1fr);
			.tag-item {
				padding: 16rpx 48rpx;
				background-color: #F0F1F2;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 24rpx;
				background: #F0F1F2;
				border-radius: 8rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}

			.tag-item-active {
				background-color: #FE3F59;
				color: #fff;
			}

			.disabled {
				color: #909399;
				pointer-events: none;
			}
		}

		::v-deep .u-radio-group {
			flex: none;
		}
	}

	.explain {
		display: inline-flex;
		vertical-align: baseline;
		padding-right: 5rpx;
	}
</style>